<template>
  <div class="app w-full h-full">
    <TopNav title="数据大屏" />
    <div class="content mx-auto flex justify-evenly items-center">
      <div class="left w-[20%] h-[98%]">
        <Panel class="flex flex-col justify-around items-center">
          <div class="w-[95%] h-64 mx-auto my-2">
            <LineChart
              title="近五年农村、城镇人口"
              :category="lineChartDataLeft.category"
              :data="lineChartDataLeft.data"
            />
          </div>
          <div class="w-[95%] h-64 mx-auto my-2">
            <BarChart
              :category="barChartDataLeft.category"
              :data="barChartDataLeft.data"
              :dtEnd="20"
              title="2020年各省男、女平均寿命"
            />
          </div>
          <div class="w-[95%] h-64 mx-auto my-2">
            <PieChart :data="pieChardDataLeft" title="2022年人口自然增长率TOP5省份" />
          </div>
        </Panel>
      </div>
      <div class="main w-[58%] h-[98%]">
        <Panel>
          <div class="overflow-hidden">
            <!-- 中部总览数据 -->
            <div class="w-full h-16 flex justify-evenly items-center my-2">
              <div class="w-1/5 h-full">
                <Panel>
                  <div class="w-full h-full flex flex-col justify-center items-center">
                    <p class="text-sm text-[#f6f7d7]">全国人口总数</p>
                    <span class="text-lg font-bold text-teal-300">
                      {{ dataStoreInstance.totalPerson }}万人
                    </span>
                  </div>
                </Panel>
              </div>
              <div class="w-1/5 h-full flex flex-col justify-center items-center">
                <Panel>
                  <div class="w-full h-full flex flex-col justify-center items-center">
                    <p class="text-sm text-[#f6f7d7]">全国城镇人口数</p>
                    <span class="text-lg font-bold text-teal-300">
                      {{ dataStoreInstance.totalUrbanPerson }}万人
                    </span>
                  </div>
                </Panel>
              </div>
              <div class="w-1/5 h-full flex flex-col justify-center items-center">
                <Panel>
                  <div class="w-full h-full flex flex-col justify-center items-center">
                    <p class="text-sm text-[#f6f7d7]">全国农村人口数</p>
                    <span class="text-lg font-bold text-teal-300">
                      {{ dataStoreInstance.totalRuralPerson }}万人
                    </span>
                  </div>
                </Panel>
              </div>
            </div>
            <!-- 地图数据 -->
            <div class="map h-[630px]">
              <ChinaMap
                :data="mapData.total"
                :toolTipData="mapData.tooltip"
                :unit="'万人'"
                :max="mapMax"
                :min="mapMin"
              />
            </div>
            <!-- 各省份数据 -->
            <div class="w-5/6 h-[120px] flex justify-center items-center my-2 mx-auto">
              <div class="w-full h-full">
                <ul class="t-body w-full h-full relative">
                  <li
                    class="t-head w-full h-8 bg-[#3f72af] flex justify-between items-center px-2 sticky top-0"
                  >
                    <div class="text-sm flex-1 text-center text-sky-300">省份</div>
                    <div class="text-sm flex-1 text-center text-sky-300">城镇人口（万人）</div>
                    <div class="text-sm flex-1 text-center text-sky-300">农村人口（万人）</div>
                    <div class="text-sm flex-1 text-center text-sky-300">总人口（万人）</div>
                  </li>
                  <li
                    class="t-item w-full h-8 flex justify-between items-center px-2"
                    v-for="(item, index) in dataStoreInstance.personData"
                    :key="index"
                  >
                    <div class="text-sm flex-1 text-center text-white">
                      {{ item.province }}
                    </div>
                    <div class="text-sm flex-1 text-center text-white">
                      {{ item.urbanPopulation }}
                    </div>
                    <div class="text-sm flex-1 text-center text-white">
                      {{ item.ruralPopulation }}
                    </div>
                    <div class="text-sm flex-1 text-center text-white">
                      {{ item.totalPopulation }}
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </Panel>
      </div>
      <div class="right w-[20%] h-[98%]">
        <Panel class="flex flex-col justify-around items-center">
          <div class="w-[95%] h-64 mx-auto my-2">
            <LineChart
              title="人口数最高的5个省份出生率、死亡率"
              :category="lineChartDataRight.category"
              :data="lineChartDataRight.data"
            />
          </div>
          <div class="w-[95%] h-64 mx-auto my-2">
            <BarChart
              :category="barChartDataRight.category"
              :data="barChartDataRight.data"
              title="2020年各省男、女平均寿命 TOP5"
            />
          </div>
          <div class="w-[95%] h-64 mx-auto my-2">
            <PieChart :data="pieChardDataRight" title="2020年平均寿命 TOP8" />
          </div>
        </Panel>
      </div>
    </div>
  </div>
</template>

<script name="App" setup>
import Panel from './components/Panel.vue';
import TopNav from './components/TopNav.vue';
import { dataStore } from './stores/dataStore';
import ChinaMap from './components/ChinaMap.vue';
import PieChart from './components/PieChart.vue';
import BarChart from './components/BarChart.vue';
import LineChart from './components/LineChart.vue';

// 初始化数据
const dataStoreInstance = dataStore();
dataStoreInstance.init();

// 2020年平均寿命 TOP8
const pieChardDataRight = computed(() => {
  return dataStoreInstance.pieChardDataRight;
});

// 2020年各省男、女平均寿命 TOP5
const barChartDataRight = computed(() => {
  return dataStoreInstance.barChartDataRight;
});

// 2020年各省男、女平均寿命
const barChartDataLeft = computed(() => {
  return dataStoreInstance.barChartDataLeft;
});

// 2018 - 2022年，农村人口、城镇人口人数变化
const lineChartDataLeft = computed(() => {
  return dataStoreInstance.lineChartDataLeft;
});

// 2018 - 2022年，人口出生率、死亡率
const lineChartDataRight = computed(() => {
  return dataStoreInstance.lineChartDataRight;
});

// 人口自然增长率 TOP5 省份
const pieChardDataLeft = computed(() => {
  return dataStoreInstance.pieChardDataLeft;
});

// 地图数据
const mapData = computed(() => {
  return {
    total: dataStoreInstance.mapData.total,
    tooltip: dataStoreInstance.mapData.tooltip
  };
});

// 地图数据 Max
const mapMax = computed(() => {
  return dataStoreInstance.mapData.total[0]?.value;
});

// 地图数据 Min
const mapMin = computed(() => {
  return dataStoreInstance.mapData.total[dataStoreInstance.mapData.total.length - 1]?.value;
});
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  min-width: 75rem;
  background-color: #031337;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url('./assets/images/bg.jpg');
}

.content {
  width: 100%;
  height: calc(100% - 6rem);
}

.map {
  width: 100%;
}

.t-item {
  background-color: rgba(255, 255, 255, 0.5);
}

.t-body {
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
